<template>
    <div style="width:94%;margin:auto">
        <div style="border-bottom: 1px solid;">
            <h3>我的购物清单</h3>
        </div>
        <div style="margin-top:10px">
            <el-table :data="carts"  border  @selection-change="handleSelectionChange">
			
                <el-table-column  type="selection">
			    </el-table-column>
				
				<el-table-column  prop="newBook.id" label="编号" min-width="5%">
				</el-table-column>
				
                <el-table-column  label="图片" min-width="10%">
                    <template slot-scope="scope">
						<div style="width: 80px;height: 80px;">
							<img v-bind:src="`${imgUrl}/api/public/showImg/${scope.row.newBook.picture}`"
								style="width: 80px; height: 80px;" />
						</div>
					</template>
                </el-table-column>

                <el-table-column  prop="newBook.name" label="商品名称" min-width="30%">
			    </el-table-column>

                <el-table-column  prop="newBook.price" label="商品价格" min-width="15%">
			    </el-table-column>

                <el-table-column  label="商品数量" min-width="15%">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.cart.num" controls-position="right" :min="1">
                        </el-input-number>
                    </template>
			    </el-table-column>

                <el-table-column  label="商品总价 " min-width="10%">
                    <template slot-scope="scope">
                        {{Total(scope)}}
                    </template>
			    </el-table-column>
               
			   
			   <el-table-column  min-width="10%">
				   <template slot-scope="scope">
					   <el-button @click="del(scope.row.cart.id)" type="danger">删除</el-button>
				   </template>
			   </el-table-column>
			   
            </el-table>

            <div style="margin-top:10px;border-top:5px solid gray">
                <el-tag style="margin-top:10px">总价钱:</el-tag> {{Total2}}
            </div>
            <hr>
            <el-button @click="goOrder()" type="warning">去下单</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Cart",
        props: [],
        data() {
            return {
                carts:[],
                num:1,
                Amount:0,
                orderObjs:[]
            };
        },
        methods: {
            handleSelectionChange(val){
                this.orderObjs = val
            },
            goOrder(){
                this.$store.commit('$_setOrders',this.orderObjs);
                if(this.$store.state.orders.length==0){
                    this.$message.error('请选择需要下单的商品');
                    return
                }
                this.$router.push({
                    path : "/fore/order/GoOrders",
                    query:{Amount:this.Amount}
                })
            },
			del(id){
				this.$get("/api/fore/cart/delCart/"+id).then(
				    function(resp) {
				        _this.carts = resp.data.data
						_this.$message({
						    message: resp.data.msg,
						    type: 'success'
						});
				    }
				)
			}
        },
        computed:{
            Total(){
                return function(scope){
                    return scope.row.newBook.price*scope.row.cart.num
                }
            },
            Total2(){
                var num = 0;
                for (const key in this.orderObjs) {
                    var obj = this.orderObjs[key]
                    num += obj.newBook.price*obj.cart.num
                }
                this.Amount = num;
                return num
            }
        },
        mounted() {
            window._this = this;
            this.$postX("/api/fore/cart/findAll").then(
                function(resp) {
                    _this.carts = resp.data.data
                }
            )
        }
    };
</script>
<style scoped="scoped">
.to{
    display: inline-block;
    border: 1px solid gray;
    background-color: aquamarine;
    padding:2px;
    margin-top: 5px
}
</style>